

//获取元素

let registerInp=document.querySelectorAll('.register-inp')
let registerMsgP=document.querySelectorAll('.register-box p')
let reBtn=document.querySelector('.re-btn')
let changeBtn=document.querySelector('.change-btn')


/**
 * 1.定义变量保存验证规则 === 正则表达式
 */
 let regArr = [
    /^[a-zA-Z]\w{5,11}$/,   //6-12: 字母开头,后面跟字母\数字\下划线
    /^1[3456789][0-9]{9}$/, //11  : 
    /^[a-zA-Z]\w{3}$/,      //4位验证码: 字母开头,后面跟字母\数字\下划线
    /^[a-zA-Z]\w{5,11}$/    //6-12: 字母开头,后面跟字母\数字\下划线
  ]



/**
 * 需求1:失去焦点验证, 验证账号 手机验证码 手机号 密码
 */

 registerInp.forEach(function(dom,i){
    // console.log(registerInp);
    dom.addEventListener('blur',function(){
        // console.log(123);

        //失去焦点,验证输入信息的合法性
        //正则.test( 输入信息 )
        let bool = regArr[i].test(dom.value)

        //判断
        if (bool) {//验证通过
            registerMsgP[i].style.display = 'none'
        } else {//验证失败
            registerMsgP[i].style.display = 'block'
        }

    })

 })


 /**
 * 3. 需求: 点击注册按钮,验证账号 手机验证码 手机号 密码
 */
reBtn.addEventListener('click', function () {

    // console.log(123);
    for (let i = 0; i < registerInp.length; i++) {
      //正则.test( 输入信息 )
      let bool = regArr[i].test(registerInp[i].value)
  
      //判断
      if (bool) {//验证通过
        registerMsgP[i].style.display = 'none'
  
      } else {//验证失败
        registerMsgP[i].style.display = 'block'
        return
      }
    }
  })


  /**
 * 4. 需求: 点击change-btn,切换注册点击的状态
 */
changeBtn.addEventListener('change', function () {
    // console.log(456);
    //获取当前changeBtn的选中状态
    if (changeBtn.checked) {//选中
      reBtn.style.backgroundColor = 'deepskyblue'
      reBtn.disabled = false; //取消禁用
  
    } else {//没有选中
      reBtn.style.backgroundColor = '#ccc'
      reBtn.disabled = true; //禁用
    };
  })